import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Ref, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { AllotManageContext, IAllotActionEnum } from '../mconfig';
import { propertyTableConfig } from '../mconfig';
import { Col, Row, message, Table } from 'antd';
import { getColorTextLoadMap, getKeyRouter, getLoadMapList, getSelectDataMapList, getTenantID, onCloseModalCommon } from '@/utils';
import { PropertyTableCommon } from './propertyTableCommon';
import { ILoadMapTypeAll } from '@/common';
import { AssetAllotManageAPI } from '../common/type';
import { getAssetList } from '../services';
import _ from 'lodash';
import { data } from 'jquery';

export const OpenPropertyModal: React.FC<AssetAllotManageAPI.IOpenPropertyModal> = ({ onClose, isShowModal, materialId }) => {
  /**弹框的ref*/
  const updateModalRef: Ref<IOneModalRef> = useRef(null);
  const styleFixCls = 'contract-styfixcls-';
  /** 获取上下文 */
  const {
    materielList,
    allotDispatch,
  } = useContext(AllotManageContext);

  /** 表格数据 */
  const [dataSource, setDataSource] = useState<Record<string, any>[]>([]);
  /** 获取调剂资产回调 */
  const getAssetListCallback = (res: any) => {
    setDataSource(res?.obj || [])
    let idx = materielList.findIndex((item: Record<string, any>) => {
      return (item.materialOrAssetId === materialId || item.id === materialId);
    });
    if (idx > -1) {
      setCheckMaterialList(materielList[idx]?.checkMaterialList || [])
    }
  };
  const { getAssetListLoading, getAssetListRun } = getAssetList(getAssetListCallback);

  /** 暂时保存选中的值 */
  const [checkMaterialList, setCheckMaterialList] = useState<Record<string, any>[]>([]);

  /** 点击选中 */
  const onSelectTable = (selectInfo) => {
    setCheckMaterialList(selectInfo);
  };

  /** 初始化 */
  useEffect(() => {
    getAssetListRun(materialId);
  }, [isShowModal]);

  /** 点击确定 */
  const onSave = () => {
    let checkList = [] as Array<any>
    if (checkMaterialList && checkMaterialList?.length > 0) {
      checkMaterialList.map(item => {
        let data = {id: item.id, assetCode: item.assetCode}
        checkList.push(data)
      })
      
      /** 修改表格数量 */
      let idx = materielList.findIndex((item: Record<string, any>) => {
        return item.id === materialId;
      });
      let arr = _.cloneDeep(materielList);
      if (idx !== -1) {
        arr[idx].checkMaterialList = checkList;
      }
      // 存储到仓库
      allotDispatch({
        type: IAllotActionEnum.SELECT_MATERIEL,
        payload: [...arr],
      });
      onCloseModalCommon(updateModalRef);
    } else {
      message.error('请至少选择一个资产');
    }
    return;
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={updateModalRef}
        title={'资产列表'}
        onCancel={onClose}
        width={document.body.clientWidth * 0.65}
        bodyStyle={{
          height: document.body.clientHeight * 0.55,
          padding: 10,
        }}
        onOk={onSave}
      >
        <Row className={`${styleFixCls}materialModal`}>
          <Col>
        {/* <Table
          size="small"
          bordered
          scroll={{ x: 1200, y: 'true' }}
          columns={propertyTableConfig()}
          // loading={tableProps?.loading}
          dataSource={dataSource}
          rowKey={'id'}
        /> */}
            <PropertyTableCommon
              styleFixCls={styleFixCls}
              selectTablePorps={{
                onSelectTable,
                selectRowObjList: checkMaterialList,
                selectType: 'checkbox',
                setCheckRows: setCheckMaterialList,
              }}
              tableProps={{
                columns: propertyTableConfig(),
                getAssetListLoading,
                dataSource: dataSource, // dataRowMemo,
                rowKey: 'id',
              }}
            />
          </Col>
        </Row>
      </OneModal>
    </>
  );
};
